import { Suspense, lazy } from "react";

import { Iconify, SvgIcon } from "@/components/icon";
import { CircleLoading } from "@/components/loading";

import type { AppRouteObject } from "#/router";
const HistoryAlarm = lazy(() => import("@/pages/history/alarm"));
const AlarmAnalysis = lazy(() => import("@/pages/history/analysis"));
const HistoryData = lazy(() => import("@/pages/history/data"));

function Wrapper({ children }: any) {
	return <Suspense fallback={<CircleLoading />}>{children}</Suspense>;
}

const others: AppRouteObject[] = [
	{
		path: "historyData",
		element: (
			<Wrapper>
				<HistoryData />
			</Wrapper>
		),
		meta: {
			label: "sys.menu.history_data",
			icon: <Iconify icon="mdi:chart-line" size={24} />,
			key: "/historyData",
		},
	},
	{
		path: "historyAlarm",
		element: (
			<Wrapper>
				<HistoryAlarm />
			</Wrapper>
		),
		meta: {
			label: "sys.menu.history_alarm",
			icon: <Iconify icon="mdi:bell-outline" size={24} />,
			key: "/historyAlarm",
		},
	},
	{
		path: "historyAnalysis",
		element: <AlarmAnalysis />,
		meta: { 
			label: "sys.menu.history_analysis", 
			icon: <Iconify icon="mdi:chart-box-outline" size={24} />,
			key: "/historyAnalysis" 
		},
	},
];

export default others;
